<template>
	<view class="container">
		<view class="wrapper">
			<view style="padding: 40rpx;">
				<view style="margin: 40rpx 0rpx;">
					<view style="display:flex;justify-items:center;align-items: center;">
						<image :src="userInfo.avatar?userInfo.avatar:'../../static/mine/user-circle-solid.png' " style="width: 120rpx;height:120rpx;border-radius: 120rpx; margin-right:30rpx;"></image>
						<view>
							<view style="font-size:34rpx;font-weight:600;color:#fffff1;line-height:60rpx;">
								{{ userInfo.realName || '' }}{{ (userInfo.identity == 2?'（场馆主）':userInfo.identity == 3?'（教练员）':userInfo.identity == 4?'（指导员）':userInfo.identity == 1?'':'（体检中心）') }}
							</view>
							<view style="font-size:26rpx;color: #e5e5e5;">
								 账号： {{ userInfo.account || '-'}}
							</view>
						</view>
					</view>
				</view>
				<!-- 主要功能 -->
				<view class="models menu">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(item,itemIndex) in commonList" :key="itemIndex" :customStyle="{paddingTop: '30rpx'}" @click="onLink(item.path)" >
							<image :src="item.icon"></image>
							<text class="grid-text">{{item.name}}</text>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 统计 -->
				<view class="models ">
					<u-row justify="space-between" gutter="10" >
						<u-col span="4">
							<view style="text-align: center;">
								<view style="font-size: 35rpx;font-weight: 600;">
									{{ coursesCollect.total }}
								</view>
								<view style="font-size: 30rpx;padding-top: 10rpx;color: #666666;">我的学生</view>
							</view>
						</u-col>
						<u-col span="8">
							<view style="text-align: center;border-left: 1px solid #e5e5e5;">
								<view style="font-size: 30rpx;line-height: 50rpx;">已结业：<text style="font-size: 30rpx;">{{ coursesCollect.complete }}</text>人</view>
								<view style="font-size: 30rpx;line-height: 50rpx;">学习中：<text style="font-size: 30rpx;">{{ coursesCollect.studying }}</text>人</view>
								<view style="font-size: 30rpx;line-height: 50rpx;">已预约：<text style="font-size: 30rpx;">{{ coursesCollect.reservation }}</text>人</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<!-- 次要功能 -->
				<view class="models" style="padding: 10rpx 0rpx;">
					<view class="list">
						<view class="item" @click="myInfoLink()">
							<image src="/static/workbench/icon_person.png"></image>
							<view class="name">我的信息</view>
							<u-icon name="arrow-right" color="#999" size="20rpx">
							</u-icon>
						</view>	
						<view class="item" v-for="item in otherMenuList" :key="item.name" @click="onLink(item.path)">
							<image :src="item.icon"></image>
							<view class="name">{{item.name}}</view>
							<u-icon name="arrow-right" color="#999" size="20rpx">
							</u-icon>
						</view>
						<view class="item" @click="outLogin()">
							<image src="/static/image/venue.png"></image>
							<view class="name">退出登录</view>
							<u-icon name="arrow-right" color="#999" size="20rpx">
							</u-icon>
						</view>	
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import utils from '@/utils/utils.js';
	import md5 from '@/utils/md5.js';
	export default {
		data() {
			return {
				userInfo: {
					//图片
					avatar: '',
					//真实名称
					realName: '',
					//账号
					account: '',
					//身份（1：普通用户，2：场馆主，3：教练员，4：指导员，5：体检中心）
					identity: 0,
					//教练或指导员ID
					coachInstructorId: ''
				},
				//我的学生即按状态学生人数
				coursesCollect: {
					//已结业
					complete: 0,
					//已预约
					reservation: 0,
					//学习中
					studying: 0,
					//总学生数
					total: 0
				},
				commonList: [{
						icon: '/static/workbench/icon_course.png',
						name: '课程管理',
						path: '/pagesWorkbenches/pages/course/course'
					},
					{
						icon: '/static/workbench/icon_order_ball.png',
						name: '运动知识',
						path: '/pagesWorkbenches/pages/sportKnowledge/sportKnowledge'
					},
					{
						icon: '/static/workbench/icon_order_course.png',
						name: '健康指南',
						path: '/pagesWorkbenches/pages/healthGuide/healthGuide'
					},
				],
				otherMenuList: [
					{
						icon: '/static/workbench/icon_work.png',
						name: '我的评价',
						path: '/pagesBusiness/pages/evaluate/evaluate'
					},
					{
						icon: '/static/image/coach.png',
						name: '我的粉丝',
						path: '/pagesBusiness/pages/fans/fans'
					},
					{
						icon: '/static/mine/icon_pwd.png',
						name: '修改密码',
						path: '/pages/mine/updatePwd/updatePwd'
					}
				]
			}
		},
		onShow() {
			this.userInfo.identity = uni.getStorageSync('identity');
			this.getUserData();
		},
		methods: {
			//用户信息
			getUserData(){
				var url = '/blade-merchant-app/merchant-app/coach/getCoachInfo';
				//身份（1：普通用户，2：场馆主，3：教练员，4：指导员，5：体检中心）
				if(this.userInfo.identity == 4) {
					url = '/blade-merchant-app/merchant-app/instructor/getInstructorInfo';
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request({
					url: url,
					type: 'GET'
				}).then(res => {
					uni.hideLoading();
					this.userInfo.avatar = res.data.coachImg;
					this.userInfo.realName = res.data.coachName;
					this.userInfo.account = res.data.account;
					this.userInfo.coachInstructorId = res.data.id;
					//教练、指导员学生数量
					this.coursesCollect = res.data.coursesCollect;
					//教练员、指导员ID存缓存
					uni.setStorageSync('coachInstructorId', res.data.id);
					//教练员、指导员绑定的场馆列表，存入缓存再其他页面可用
					if(res.data.venueList.length>0){
						uni.setStorageSync('myVenueList', JSON.stringify(res.data.venueList));
					} else {
						uni.removeStorageSync('myVenueList');
					}
				})
			},
			//我的信息
			myInfoLink(){
				//身份（1：普通用户，2：场馆主，3：教练员，4：指导员，5：体检中心）
				if(this.userInfo.identity == 3) {
					//教练员
					this.onLink('/pagesBusiness/pages/user/coachInfo/coachInfo');
				} else if(this.userInfo.identity == 4){
					//指导员
					this.onLink('/pagesBusiness/pages/user/instructorInfo/instructorInfo');
				}
			},
			onLink(url) {
				uni.navigateTo({ url: url })
			},
			//退出登录
			outLogin(){
				uni.showModal({
				   title: '退出登录',
				   content: '是否退出当前登录账户？',
				   showCancel: true,
				   success: function (res) {
					   if (res.confirm) {
						   utils.onLogout();
					   }
				   }
				});
			}
		}
	}
	
	
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #ffffff;
		overflow: hidden;
		background: linear-gradient(#155CCF,#f1f1f1,#f1f1f1, #f1f1f1);
		letter-spacing: 1rpx;

		.container {
			height: 100%;

			.wrapper {
				width: 100%;
				
				.menu {
					padding-top: 12rpx;
				
					image {
						display: block;
						width: 70rpx;
						height: 70rpx;
					}
					.grid-text {
						text-align: center;
						font-size: 28rpx;
						color: #444444;
						padding-top: 15rpx;
					}
				}
				
				.list {
				
					.item {
						position: relative;
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 32rpx 45rpx;
				
						image {
							display: block;
							width: 40rpx;
							height: 40rpx;
						}
				
						.name {
							flex: 1;
							padding-left: 20rpx;
							font-size: 31rpx;
						}
				
						button {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: transparent;
				
							&::after {
								border: none;
							}
						}
				
						&:nth-child(n + 2) {
							border-top: 1rpx solid #e6e6e6;
						}
					}
				}
				
				
			}
		}
	}
	.models {
		margin-bottom: 30rpx; background-color: rgba(255, 255, 255, 75%);padding: 40rpx 10rpx 40rpx 10rpx;border-radius: 20rpx;
	}
	
</style>